//表格测试
import React, { useState } from 'react';
import useStore from '../../components/useStore';
import { Button,Col,Empty,Row,Upload } from 'antd';

const Excel = () => {//excel测试页

    const { collapsed } = useStore()
    const [testData,settestData]=useState([])//需展示的测试数据

    const check=async (file)=>{
        if(file.size>100*1024*1024){//文件大于100MB不让上传
            console.log("文件过大")
        }
    }

    const handleChange=async (res)=>{
        if(res.file.status=="done"){
            settestData(res.file.response.data)
        }
    }

    return (
        <div style={{    height: "94%", backgroundColor: `#F1F1F1`,right:"1%",top:"4vh",overflow:"hidden",
        backgroundSize: "100% 100%", width: collapsed?"94%":"84%", position: "absolute",  color: "white", fontSize: "0.8rem"}}>
            <div style={styles.kshcontainer}>
                <div style={{
                    fontSize: "0.7rem", position: "relative", width: "96%", marginLeft: "2%", backgroundColor: "", display: "flex",
                    textIndent: "1rem", justifyContent: "flex-start", alignContent: "flex-start", flexWrap: "wrap"
                }}>
                    <Upload
                        action="/admin/dev/excelTest"//多加一个admin走配置代理
                        method="POST"
                        name="file"
                        accept=".xlsx,xls"
                        maxCount={1}
                        onChange={handleChange}
                        beforeUpload={check}
                        // 添加请求头配置
                        headers={{
                            Authorization: `Bearer ${JSON.parse(localStorage.getItem('user')).token}`
                        }}
                    >
                        <Button>上传</Button>
                    </Upload>
                    <br/>
                    <div style={{width:"100%",height:"80vh",overflowY:"scroll"}}>
                        数据：
                        {
                            testData.length==0?
                            (<div>
                                <Empty description="未上传表格/上传的表格为空"/>
                            </div>):
                            (<div>
                                <Row>
                                    <Col>序号</Col>
                                    {Object.entries(testData[0]).map(([key]) => (
                                        <Col key={key} style={{ padding: "0 10px" }}>
                                            {key}
                                        </Col>
                                    ))}
                                </Row>
                                {testData.map((item,index)=>{
                                    return <Row>
                                        <Col>{index+1}</Col>
                                        {Object.entries(item).map(([key, value]) => (
                                            <Col key={key} style={{ padding: "0 10px" }}>
                                                {value}
                                            </Col>
                                        ))}
                                    </Row>
                                })}
                            </div>)
                        }
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Excel

var styles = {
    kshcontainer: {
        width: "98%", 
        height: "95%", 
        position: "absolute", top: "3%", 
        left: "1%", backgroundColor: "white", 
        color: "black",
        borderRadius: "10px",
    },
}